<template>
  <!--  监控抓拍-->
  <div>
    <!--        时间筛查-->
    <div
      style="margin-left: 20px;width: 900px;height: 80px ;line-height: 80px;display: flex;justify-content: space-between;align-items: center">
      <el-date-picker
        :clearable="false"
        style="width:60%;min-width:240px;height: 40px"
        size="small"
        value-format="timestamp"
        v-model="timerArray"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="预警开始日期"
        end-placeholder="预警结束日期">
      </el-date-picker>
      <el-button class="common_btn-defalut" icon="el-icon-search" style="width: 10%"
                 @click="getAllPhoto">搜索
      </el-button>
    </div>
    <el-container class="content">
      <el-header class="heads">
      </el-header>
      <div class="middle">
        <el-checkbox-group v-model="card.checkedCard" style="width: 100%">
          <el-card
            shadow="always"
            class="base_img"
            :body-style="{ padding: '0px' }"
            v-for="(item, index) in imgList"
            style="width: 16%;text-align: center;margin: 1% 0.3%;"
            :key="item.id">
            <el-image v-if="item.photoUrl.indexOf('.mp4') > -1" class="base_img-item" @click="play(item.photoUrl)"
                      :src="require('./playMp4.png')"></el-image>
            <el-image v-else class="base_img-item" @click="previewImg(index)"
                      :src="constUrl+item.photoUrl"></el-image>
            <div class="base_img-time flex-between">
              <!--                  <el-checkbox class="big-checkbox hide-checkbox-text" :label="item"-->
              <!--                               :key="item.id" style="display: block;margin-left: 30px;margin-right:20px"><br/></el-checkbox>-->
              <em style="display: inline-block;width: 210px;text-align: left">
                <p><em style="color: #1990FE;font-weight: 600">SN：</em>{{item.sn}}</p>
                <p><em style="color: #1990FE;font-weight: 600">抓拍时间：</em>{{item.bizTime |formatTimer}}</p>
                <p><em style="color: #1990FE;font-weight: 600">上传时间：</em>{{item.createTime |formatTimer}}</p>
                <p><span><em style="color: #1990FE;font-weight: 600">电压：</em>{{item.battery}}V</span>
                  <span><em style="color: #1990FE;font-weight: 600;margin-left: 30%">信号：</em>{{item.asignal}}</span></p>
              </em>
            </div>

          </el-card>
        </el-checkbox-group>
      </div>
      <!--分页器-->
      <el-pagination style="margin-right: 50px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="form.page"
                     :page-size="form.pageSize"
                        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
                     :total="form.total">
      </el-pagination>
      <el-dialog
        title="视频播放"
        v-if="playMp4"
        :visible.sync="playMp4"
        :close-on-click-modal="false"
        width="1080px">
        <video id="singleVideo" controls autoplay preload="none" class="video-js vjs-default-skin" ></video>
      </el-dialog>
      <picture-viewer ref="imageViewer"></picture-viewer>
    </el-container>
  </div>
</template>
<script>
import {
  downloadPhotos
} from '@/services/model/road-control'
import PictureViewer from '@/components/picture-viewer'
import {
  getTestPhoto
} from '@/services/model/camera'
import constUrl from '@/services/env'
import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import Format from '@/utils/format'

const timer = 30 * 24 * 3600 * 1000

export default {
  data() {
    return {
      // 时间选择器配置
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }],
        onPick: obj => {
          this.picerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if (this.picerMinDate) {
            // 最多可选3个月
            const LIMIT = 90 * 24 * 60 * 60 * 1000
            const maxTime = this.picerMinDate + LIMIT
            const minTime = this.picerMinDate - LIMIT
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        }
      },
      deptTree: {
        deptTreeId: '',
      },
      card: {
        checkedCard: [] //选中的返回的数据
      },
      form: {
        page: 1,
        pageSize: 10,
        startCreateTime: Date.parse(new Date()) - timer,
        endCreateTime: Date.parse(new Date()),
      },
      playMp4: false,
      imgList: [],
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4", // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      constUrl,
    }
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    },
  },
  computed: {
    // 时间筛选
    timerArray: {
      get() {
        return [this.form.startCreateTime, this.form.endCreateTime]
      },
      set([startTimer, endTimer]) {
        this.form.startCreateTime = startTimer
        this.form.endCreateTime = endTimer
      }
    },
  },
  watch: {},
  mounted() {
    this.getAllPhoto();
  },
  methods: {
    play(src) {
      this.playMp4 = true
      let res=this.constUrl + src
      this.$nextTick(()=>{
        this.singlePlayer = videojs("singleVideo", {
          autoplay: false,//自动播放
          controls: true,//控件显示
          width: "1080px",//视频框宽度
          height: "364",//视频框高度
        });
        // let res='https://vjs.zencdn.net/v/oceans.mp4'
        let res=this.constUrl + src
        if (res) {
          this.singlePlayer.src({ src:res , type: "video/mp4" });
          this.singlePlayer.play();
        }
      })
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getAllPhoto()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.getAllPhoto()

    },
    //获取照片数据
    async getAllPhoto() {
      let res = await getTestPhoto(this.form)
      this.imgList = res.data.records
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    //下载照片
    async downloadPhotos(val) {
      await downloadPhotos({ids: val})
    },
    // 查看大图
    previewImg(index) {
      this.$refs.imageViewer.showViewer(this.imgList.map(x => this.constUrl + x.photoUrl), index, this.imgList.map(x => x.arrangementName))
    },
    playVideo(src) {
      this.$refs['playerObj'].playerOptions.sources[0].src = src
    },
  },
}
</script>
<style scoped lang="less">
  .btnNo {
    background: #d5d5d5 !important;
    color: #939292 !important;
    border: #939292 !important;
  }

  .info-input {
    color: #228AF5;
    margin-left: 20px;
    font-weight: 600;
    font-size: 17px;
  }

  .info-parameter {
    color: #2dca7f;
    margin-left: 20px;
    font-weight: 600;
    font-size: 15px;
  }

  .input {
    width: 150px;
  }

  .el-select {
    width: 150px;
  }

  .heads {
    padding-top: 20px;
    /*height: 400px !important;*/
    height: auto !important;
    margin: 0 auto;
    width: 100%;
  }

  /deep/ .el-container {
    width: 100%;
    padding: 20px;

  }

  .middle {
    width: 100%;
    height: 620px;
    margin: 20px auto;
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    align-items: center;


  }

  .el-button--success {
    background-color: #67c23a;
  }

  .p-show {
    margin-top: 8px;
  }

  .el-main {
    overflow-y: auto;
  }

  .param-view {
    margin-top: 5px;
  }

  .el-divider--horizontal {
    margin: 15px 0;
  }

  .base_img {
    display: inline-block;

    .el-button--text {
      color: black;
    }


    width: 175px;

    .base_img-item {

      height: 175px;
      cursor: pointer;
    }

    .base_img-name {
      padding: 10px 6px;
    }

    .base_img-time {
      font-size: 12px;
      padding: 0 6px 6px;
      color: #999;

      p {
        margin: 10px 0;
      }
    }
  }

  .h3Title {
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #1990FE, rgba(25, 144, 254, 0.5), rgba(25, 144, 254, 0.2));
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600
  }

  .org_view {
    background-color: white;
    height: calc(100vh - 93px);
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 8px #757575;
    box-shadow: 2px 2px 4px #ababab;
  }

  /deep/ .el-tree-node__label {
    font-weight: 600 !important;
    width: 120% !important;
    height: 40px;
    line-height: 40px;
  }

  /deep/ .el-tree-node__content:hover {
    font-weight: 600 !important;
    background: linear-gradient(to right, #1990FE, rgba(25, 144, 254, 0.8), rgba(25, 144, 254, 0.5), rgba(25, 144, 254, 0.3)) !important;
    color: white !important;
  }

  /deep/ .el-tree-node__content:hover {
    font-size: 120% !important;
  }

  /deep/ .el-tree-node__label:active {
    font-weight: 600 !important;
    color: white !important
  }

  /deep/ .el-tree-node__content {
    height: 40px;
    line-height: 40px;
    /*padding: 10px 0px !important;*/
    margin-left: 10px;
    border-radius: 0px 5px 5px 0px !important;
    margin: 2px 0;
    margin-left: 5px;
  }

  /deep/ .el-tree-node.is-current > .el-tree-node__content {
    border-radius: 0px 5px 5px 0px !important;
  }

  /deep/ .el-checkbox__inner {
    border: 1px solid #1990FE;
  }
</style>
